<template>
	<view class="page">
		<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 80%;display: flex;">
			<cover-image v-if="index==0" :src="card" mode="heightFix" style="height: 300px;width: 450px;transform: rotate(90deg);position: absolute;bottom: 20%;left: -20px;"></cover-image>
			<cover-image v-else :src="cardb" mode="heightFix" style="height: 300px;width: 450px;transform: rotate(90deg);position: absolute;bottom: 20%;left: -20px;"></cover-image>
		</camera>
		<view style="text-align:center;justify-content:center;display:grid;margin-top: 10px;">
			<view v-if="index==0" class="text-df text-white">证件正面</view>
			<view v-else class="text-df text-white">证件背面</view>
			<view class="round photo" @click="takePhoto"><image class="bottom-img" src="../../../static/images/photo.png"></image></view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				// cityPickerValueDefault: [0, 0, 1],
				// pickerText: '',
				// areaCompare:'请选择',
				// area:'请选择',
				// areaIndex:0,
				index:0,
				sexPicker: ['男', '女'],
				workIndex:-1,
				workPicker: ['是','否'],
				basePay:'',
				realPay:'',
				age:'',
				level:'',
				card:'/static/images/cardph.png',
				cardb:'/static/images/cardbph.png',
				photo:'',
				photob:'',
				imgList:[],
				resultData:'',
				modalName: null,
			};
		},
		onShow() {
			this.index=0;
		},
		methods: {
			goPage(page){
				
				uni.setStorageSync('injuryParam',{wages:this.realPay,injury_base:this.basePay,gender:this.sexIndex+1,age:this.age,
				work:this.workIndex+1,level:this.level});
				uni.navigateTo({
					url: page
				})
			},
			takePhoto() 
			{
				//打开加载动画
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let that = this;
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						uni.uploadFile({
							url: this.$http.defaultUploadUrl, //仅为示例，非真实的接口地址
							filePath: res.tempImagePath,
							name: 'FVImage',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								var data = JSON.parse(uploadFileRes.data)
								var path = data.data.path
								console.log(path);
								that.scanImage(path);
							}
						});
						
						// let newPath = '';
						// uni.compressImage({
						// 	src: res.tempImagePath,
						// 	quality: 90,//压缩比例
						// 	success: ress => {
						// 		newPath  = ress.tempFilePath;//图片
						// 		console.log(newPath)
						// 		this.scanImage(newPath);
						// 	}
						// })
						// uni.chooseImage({
						// 	success: (chooseImageRes) => {
						// 		const tempFilePaths = chooseImageRes.tempFilePaths;
						// 		console.log(tempFilePaths) 
						// 	}
						// });
						// uni.saveFile({
						// 	tempFilePath: res.tempImagePath,
						// 	success: function (ress) {
						// 		newPath = ress.savedFilePath;
						// 		console.log(newPath)
						// 		that.scanImage(newPath);
						// 	},
						// 	fail:e=>{
						// 		console.log(e)
						// 	},
						// 	complete:ress=>{
						// 		console.log(ress)
						// 	}
						// });
						// console.log(newPath)
						
					}
				});
			},
			async scanImage(path){
				console.log(path)
				let param = {image_path:path};
				let that2 = this;
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await that2.$http.post(
					'imageScan', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				
				if(that2.index==1){
					that2.photob = data;
				}
				else{
					that2.photo = data;
				}
				that2.index++;
				if(that2.index==2){
					uni.setStorageSync('cardParam',{img1:that2.photo,img2:that2.photob});
					uni.navigateTo({
						url: '/pages/tabbar/tabbar-2/card'
					})
				}
			},		
		
		}
	}
</script>

<style>
	.page {
		height: 100%;
		width: 100%;
		background: #000;
		position: absolute;
		
	}
	.cu-bar{
		text-align: center;
		display: block;
		margin-top: 130px;
	}
	.card{
		width: 150px;
		height: 90px;
	}
	.photo{
		background-color: #FFF;
		align-items: center;
		width: 54px;
		height: 54px;
		display: flex;
		justify-content: center;
		padding: 5px;
	}
	.bottom-img{
		width: 27px;
		height: 27px;
	}
	.sure{
		width: 150px;
		height: 40px;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
	}
	.page.show {
		overflow: hidden;
	}
	.input{
		text-align: right;
		font-size: 12px;
	}
	
</style>
